import Taro, { Component } from '@tarojs/taro'
import { View, Text, Picker,Image ,Input ,Video} from '@tarojs/components'
import './quicklyConsultationModify.css'
import { AtAvatar, AtList, AtListItem, AtInput, AtForm, AtButton, AtGrid,AtSearchBar,AtTag,AtTextarea } from "taro-ui"
import app from '../../main';
import reactMixin from 'react-mixin';
import myJs from './quicklyConsultationModifyJs.js'

export default class QuicklyConsultationModify extends Component {


    config = {
        navigationBarTitleText: '快速咨询'
    }
    
    constructor () { 
        super(...arguments); 
            this.state = this.getData();
    }

    handleChange (event) {
        this.setState({
            value: event.target.value
        })
    }

    onChangeY (value) {
        this.setState({
            btnY:'color: #72d021; border: 1px solid #72d021; margin:5px 0 0 15px;',
            btnN:'color: #cccccc; border: 1px solid #cccccc; margin:5px 0 0 15px;',
            shifoujiuzhen:1,
            dateSel: '请选择出生日期',
            diseaseSel:'',
            hospitalSel:'请选择医院',
        })
    }
    
    onChangeN (value) {
        this.setState({
            btnY:'color: #cccccc; border: 1px solid #cccccc; margin:5px 0 0 15px;',
            btnN:'color: #72d021; border: 1px solid #72d021; margin:5px 0 0 15px;',
            dateSel: '',
            diseaseSel:'',
            hospitalSel:'',
            shifoujiuzhen:0
        })
    }

    onDateChange = e => {
        this.setState({
            dateSel: e.detail.value
        })
    }

    onDiseaseChange (value) {
        this.setState({
            diseaseSel:value
        })
    }

    onHospitalChange = e => {
        this.setState({
            hospitalSel: this.state.hospitalSelector[e.detail.value],       
        })
    }

    //get 医院列表
    gethospital(){
        let me = this;
        let data = {
            offset: 0,
            length: 999,
        }
        app.post('web/hospital/hospitalList', data, function(res) {
            console.log(res)
            let list = res.data.result.list
            let arr = []
            for(let i=0; i<list.length; i++){
                arr.push(list[i].name)
            }
            me.setState({
                hospitalSelector:arr
            })
        })
    }

    //get 疾病列表
    // getillness(){
    //     let me = this;
    //     let data = {
    //         offset: 0,
    //         length: 20
    //     }
    //     app.get('/json/linxu/illness.json', data, function(res){
    //         let list = res.data.result.list
    //         let arr= []
    //         for(let i=0; i<list.length; i++){
    //             arr.push(list[i].name)
    //         }
    //         me.setState({
    //             diseaseSelector:arr
    //         })
    //     })
    // }

    uploadHeadImage() {
        var me = this;
        Taro.chooseImage({
            count: 1,
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            success(res) {
                console.log(res);
                const tempFilePaths = res.tempFilePaths
                Taro.uploadFile({
                url: app.apiUri + '/admin/upload/image',
                filePath: tempFilePaths[0],
                name: 'file',
                formData: {
                    name: 'file'
                },
                success(res) {
                    let data = JSON.parse(res.data);
                    if (data.status == 200) {             
                        app.eyesfile = data.result;
                        me.setState({
                            eyesfile:data.result
                        })
                        // app.redirectTo('../quicklyConsultation/quicklyConsultation')
                        // console.log(app.eyesfile)
                    }
                }
                })
            }
        })
    }

    componentWillMount(){
        console.log(app.zixun)
        if(app.zixun.length !== 0 ){
            this.setState({
                shifoujiuzhen:app.zixun.is_cure,
                dateSel:app.zixun.last_time,
                hospitalSel:app.zixun.cure_hospital,
                diseaseSel:app.zixun.cure_illness,
                value:app.zixun.main_suit,
            })
        }
        this.gethospital();
        // this.getillness();
    }

    //跳转到如何拍照
    gotoHowToPhotograph(){
        app.zixun = {
            is_cure:this.state.shifoujiuzhen,
            last_time:this.state.dateSel,
            cure_hospital:this.state.hospitalSel,
            cure_illness:this.state.diseaseSel,
            main_suit:this.state.value,
        }
        app.navigateTo('../howToPhotograph/howToPhotograph?id=' + '20')
    }

    //跳转到如何拍视频
    gotoStep(){
        app.zixun = {
            is_cure:this.state.shifoujiuzhen,
            last_time:this.state.dateSel,
            cure_hospital:this.state.hospitalSel,
            cure_illness:this.state.diseaseSel,
            main_suit:this.state.value,
        }
        app.navigateTo('../step/step?id=' + '20')
    }

     //跳转到付款页面
     gotoChat(){
        let me = this
        if(this.state.value == ''){
            Taro.showModal({
                title: '警告',
                content: '病情描述必须填写',
                showCancel:false
            })
            return;
        }
        // if(app.eyesphoto == ''){
        //     Taro.showModal({
        //         title: '警告',
        //         content: '必须拍摄眼睛照片',
        //         showCancel:false
        //     })
        //     return;
        // }
        // if(app.eyesvideo == ''){
        //     Taro.showModal({
        //         title: '警告',
        //         content: '必须拍摄眼睛视频',
        //         showCancel:false
        //     })
        //     return;
        // }
        let data = {
            is_cure:this.state.shifoujiuzhen,
            last_time:this.state.dateSel,
            cure_hospital:this.state.hospitalSel,
            cure_illness:this.state.diseaseSel,
            main_suit:this.state.value,
            eye_images:app.eyesphoto,
            eye_videoes:app.eyesvideo,
            illness_images:app.eyesfile
        }
        app.post('web/myself/myInquiryAnswers', data, function(res){
            console.log(res.data.result.inquiry_answer_id)
            if(res.data.status == "success"){
                app.eyesfile = ''
                app.eyesphoto = ''
                app.eyesvideo = ''
                app.zixun = []
                app.inquiry_answer_id = res.data.result.inquiry_answer_id
                app.redirectTo('../chatsub/pages/Chat/Chat')  
            }else{
                Taro.showModal({
                    title: '提示',
                    content: '提交失败,错误参数：'+ res.data.errorMsg,
                    showCancel:false
                })
                return;
            }
        })
    }

    tiaoguo(){
        app.redirectTo('../chatsub/pages/Chat/Chat')
    }

  render () {
    return (
      <View className='QuicklyConsultation'>

        <View className='color'>
            <View className='textBox'>
                <View style={this.state.style}>本次咨询的疾病是否去医院就诊过</View>
            </View>
            <View className='btnBox'>
                <AtButton customStyle={this.state.btnY} size='small' onClick={this.onChangeY}>是</AtButton>
                <AtButton customStyle={this.state.btnN} size='small' onClick={this.onChangeN}>否</AtButton>
            </View>
        </View>

        <AtList style={this.state.btnY == 'color: #72d021; border: 1px solid #72d021; margin:5px 0 0 15px;' ? 'display:block' : 'display:none'}>
            <Picker mode='date' onChange={this.onDateChange}>
                <AtListItem extraText= {this.state.dateSel} arrow='right' title='最后一次就诊时间' />     
            </Picker>
            <Picker mode='selector' range={this.state.hospitalSelector} onChange={this.onHospitalChange}>
                <AtListItem extraText= {this.state.hospitalSel} arrow='right' title='就诊的医院' />     
            </Picker>
            {/* <Picker mode='selector' range={this.state.diseaseSelector}  onChange={this.onDiseaseChange}>
                <AtListItem extraText= {this.state.diseaseSel} arrow='right' title='确认疾病' />     
            </Picker> */}
        </AtList>
        <AtForm className='atinput'>
            <AtInput title='确认疾病'  placeholder='请填写疾病' value={this.state.diseaseSel} onChange={this.onDiseaseChange}></AtInput>
        </AtForm>

        <View className='questBox'>
            <View className='iconI'>     
                <Image style={this.state.iconI} src={this.state.i}/>
            </View>
            <Text style={this.state.title}>病情描述</Text>
            <Text style='color:red; font-size: 16px; margin:0 0 0 10px;'>( 必须填写 )</Text>
            <View className='textareaBox'>
                <AtTextarea
                    value={this.state.value}
                    onChange={this.handleChange.bind(this)}
                    maxLength={500}
                    placeholder='请尽可能详细地描述您的病情症状,发病时间，曾经做过的检查，到院诊断的结果，用药情况，想要获得医生的什么帮助等;'
                />
            </View>           
        </View>

        <View className='questBox'>
            <View className='iconI'>     
                <Image style={this.state.iconI} src={this.state.i}/>
            </View>
            <Text style={this.state.title}>拍摄眼睛照片</Text>
            {/* <Text style='color:red; font-size: 16px; margin:0 0 0 10px;'>( 必须填写 )</Text> */}
            <View className='describe'>请严格根据操作指引拍摄双眼的照片</View>
            <View className='row'> 
                <View className='imgBox' style={app.eyesphoto == '' ? 'display:block; display: flex;justify-content:center;align-items:Center;' : 'display:none;'} onClick={this.gotoHowToPhotograph.bind(this)}>
                    <Image className='cameraIco' src={this.state.camera}/>
                </View>
                <View className='imgBox' style={app.eyesphoto == '' ? 'display:none' : 'display:block; '}>
                    <Image className='photo' src={app.eyesphoto} />
                </View>
                <View style={app.eyesphoto == '' ? 'display:none' : 'display:block; display: flex;justify-content:center;align-items:Center;'} className='imgBox' onClick={this.gotoHowToPhotograph.bind(this)}>
                    <Image className='cameraIco' src={this.state.camera}/>
                </View>
            </View>         
        </View>

        <View className='questBox'>
            <View className='iconI'>     
                <Image style={this.state.iconI} src={this.state.i}/>
            </View>
            <Text style={this.state.title}>拍摄眼睛视频</Text>
            {/* <Text style='color:red; font-size: 16px; margin:0 0 0 10px;'>( 必须填写 )</Text> */}
            <View className='describe'>请严格根据操作指引拍摄双眼的视频</View>
            <View className='row'> 
                <View className='imgBox' style={app.eyesvideo == '' ? 'display:block; display: flex;justify-content:center;align-items:Center;' : 'display:none'}onClick={this.gotoStep.bind(this)}>
                    <Image className='cameraIco' src={this.state.camera}/>
                </View>

                <View className='imgBox' style={app.eyesvideo == '' ? 'display:none' : 'display:block;'}>
                    <Video           
                        className='photo'
                        src={app.eyesvideo}
                        controls={true}
                        autoplay={false}
                        initialTime='0'
                        loop={false}
                        muted={false}
                    />
                </View>
                
                <View style={app.eyesvideo == '' ? 'display:none' : 'display:block; display: flex;justify-content:center;align-items:Center;'} className='imgBox' onClick={this.gotoHowToPhotograph.bind(this)}>
                    <Image className='cameraIco' src={this.state.camera}/>
                </View>
            </View> 
        </View>

        <View className='questBox'>
            <View className='iconI'>     
                <Image style={this.state.iconI} src={this.state.i}/>
            </View>
            <Text style={this.state.title}>上传资料，病例等</Text>
            <View className='describe'>上传化验单，检查片子，报告单，药品方等资料会有利于医生为您给出更加全面的建议</View>
            <View className='row'> 
                <View className='imgBox' style={app.eyesfile == '' ? 'display:none; display: flex;justify-content:center;align-items:Center;' : 'display:none'} onClick={this.uploadHeadImage.bind(this)}>
                    <Image className='cameraIco' src={this.state.camera}/>
                </View>
                <View className='imgBox' style={app.eyesfile == '' ? 'display:none' : 'display:block;'}>
                    <Image className='photo' src={this.state.eyesfile} />
                </View>
                <View style={app.eyesfile == '' ? 'display:none' : 'display:block; display: flex;justify-content:center;align-items:Center;'} className='imgBox' onClick={this.uploadHeadImage.bind(this)}>
                    <Image className='cameraIco' src={this.state.camera}/>
                </View>
            </View>  
        </View>

        <View className='empty'></View>

        <View className='btnBox'>
            <AtButton type='secondary'className='leftbtn' onClick={this.tiaoguo.bind(this)}>跳过</AtButton>
            <AtButton type='primary' className='rightbtn' onClick={this.gotoChat.bind(this)}>提交</AtButton>
        </View>


      </View>
    )
  }
}
reactMixin.onClass(QuicklyConsultationModify,myJs);